import React from 'react'
import { 
  VideoListWrapper,
  VideoItem
 } from './style'
import  {Avatar} from 'antd-mobile'

export default function VideoList(props) {
  const {activityKey,videoData}=props

  const renderVideoItem=()=>{
    return videoData.map(({id,visitorsnum,goodsnum,title,name})=>(
            <VideoItem key={id}>
              <div className="video-img"></div>
              { goodsnum && <div className="video-visitorsnum">
                    <div><li>·直播中</li><li><span>{visitorsnum}</span>观看</li></div>
                </div>}
              { goodsnum && <div className="video-goodsnum">
                  <div><img src="" alt="" /></div>
                  <span>{goodsnum}件商品</span>
                </div>}
              
              <div className="video-title">
                  <span>{title}</span>
              </div>
              <div className="video-host">
                {/* <div><img src="https://p11.douyinpic.com/aweme/100x100/aweme-avatar/tos-cn-avt-0015_34583dc5dc55d5983f8a57fafcbceb6d.webp?from=2956013662" alt="" /></div> */}
                <Avatar 
                src='https://p11.douyinpic.com/aweme/100x100/aweme-avatar/tos-cn-avt-0015_34583dc5dc55d5983f8a57fafcbceb6d.webp?from=2956013662'
                style={{'--size':'.2rem',"--border-radius":".1rem"}}
                />
                <span>{name}</span>
              </div>
          </VideoItem>
    ))
  }
  return (
    <VideoListWrapper>
        {renderVideoItem()}
    </VideoListWrapper>
  )
}
